{% extends "common/layout.html" %}

{% block css%}
<style type="text/css">
    body{
        background-image:url(../../static/images/login.jpg);
        background-size: 1920px 1080px;
        background-repeat: no-repeat;
        background-position: top center;
        min-width: 1000px;
        min-height: 768px;
        /*height: 100%;*/
        position: relative;
    }
    body>.container{
        margin:0 auto;
        position: static;
        background-image: none;
    }
    .alert-warning:first-child{
        margin-top:15px;
    }
    .alert-warning{
        box-sizing:border-box;
        position: absolute;
        width:350px;
        height: 60px;
        right: 350px;
        top:auto;
        left: auto;
        bottom: 350px;
        background: none;
        border: none;
        color: red;
    }
    .alert .close{
        display: none;
    }
    .m_login{
        display: block;
        padding-top: 0;
    }
    form{
        box-sizing:border-box;
        width: 350px;
        height: 335px;
        position: absolute;
        bottom:150px;
        right:350px;
        text-align: center;
        padding-top: 100px;
    }
    form .form-group{
        margin:15px 0 !important;
        text-align: center;
    }
    form .agree{
        display: none;
        color: #fff;
        padding-left:0px;
        text-align: left;
        cursor: pointer;
    }
    form .agree a {
        color: #fff;
        text-decoration: underline;
    }
    form input.form-control{
        display: inline-block;
        background: rgba(255,255,255,0.5);
        border:1px solid #999;
        width:350px;
        font-size: 16px;
        border-radius: 0;
    }
    form .logo{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-top: -80px;
        color:#58b121;
        font-size: 34px;
        white-space: nowrap;
    }
    form .logo span{
        font-weight: bold;
    }
    form .btn{
        width:350px;
        background: #58b121;
        color: #fff;
        border-radius: 0;
        height: 40px;
        font-size: 18px;
        cursor: pointer;
    }
    input::-webkit-input-placeholder {
        color:#666 !important;
    }
    input::-moz-placeholder{
        color:#58b121 !important;
    }
    input:-ms-input-placeholder{
        color:#58b121 !important;
    }
    .auto-login{
        color: #f4f4f4;
        margin-top: -6px;
        text-align: left !important;
    }
    .auto-login input{
       margin-left: 75px;
    }
    .changePassword{
        color: #fff;
        display: none;
        float: right;
        margin-right: 75px;
    }
    .changePassword:link,.changePassword:visited,.changePassword:hover,.changePassword:active{
        color: #fff;
    }
    .m-switch{
        position: absolute;
        top: 5%;
        right: 5%;
        background: rgba(0,0,0,0);
        border: 1px solid #bbb;
        padding: 5px 10px;
        color: #ddd;
    }
</style>
{% endblock %}

{% block content %}
<a href="{{translate('./?lang=en')}}" class="switch-btn"><button class="m-switch">{{translate('Switch to English')}}</button></a>
<div class="m_login">
    <form id="loginForm" class="form-horizontal" method="post">
        <p class="logo">
            The <span>ONE</span> {{translate('智能钢琴教室')}}
        </p>
        {{ form.hidden_tag() }}
        <div class="form-group">
            {{ form.username(placeholder=translate('用户名'), class_="form-control") }}
        </div>

        <div class="form-group">
            {{ form.password(placeholder=translate('密码'), class_="form-control") }}
        </div>
        <div class="form-group">
            <button class="btn">{{translate('登 录')}}</button>
        </div>

        {# <div class="form-group agree">
            {{ form.agreement}} {{'已阅读并同意'}}<a href="/school/license_agreement" target="_blank">《The ONE智能音乐教室使用协议》</a>
        </div> #}

{#        <div class="form-group agree">#}
{#            {{ form.remember}} {{translate('已阅读并同意')}}<a href="/school/license_agreement" target="_blank">《教室用户使用协议》</a>#}
{#        </div>#}

        <div class="form-group auto-login">
			{{ form.remember }} {{translate('自动登陆')}}
            <a href="/school/password_retrieve" class="changePassword">{{translate('找回密码')}}</a>
        </div>
    </form>
</div>
{% endblock %}

{% block footer %}
{% endblock %}

{% block js %}
<script>
    sessionStorage.clear();
    $(function(){

        if(window.location.pathname.substr(1,6)=='school'&&localStorage.lang!=='lang=en'){
            $('.changePassword').css('display','inline-block')
            $('.agree').css('display', 'block')
        }
        $(".alert-warning").each(function( index ) {
            if(index !=0 ){
                $(this).hide()
            }
        });

        if (widow.location.pathname.indexOf('student') > -1 ) {
            $('.switch-btn').css('display', 'none')
        }

        var btn = $('.form-group').find('.btn')
        var checkInput = $('.agree').find('input')

        checkInput.attr('checked', 'checked')

        // {% if unchecked %}
        //     checkInput.attr('checked', false)
        // {% endif %}

     });
</script>
{% endblock %}
